{% extends "twitcn_base.html" %}

{% block title %}{{ aim_user.name }} ({{ aim_user.screen_name }}) on Twitcn{% endblock %}

{% block javascripts %}
<script type="text/javascript">$(function(){loadMoreStatus({{ more_data_json|safe }})});</script>
{% endblock %}

{% block stylesheets %}
<style type="text/css">
    body {color: #{{ aim_user.profile_text_color }}; background: #{{ aim_user.profile_background_color }} url('{{ aim_user.profile_background_image_url }}') fixed {% if not aim_user.profile_background_tile %}no-{% endif %}repeat top left;}
a { color: #{{ aim_user.profile_link_color }};}
#side_base {background-color:#{{aim_user.profile_sidebar_fill_color}};border-left:1px solid #{{ aim_user.profile_sidebar_border_color }};}
#side hr { color:#{{ aim_user.profile_sidebar_border_color }}; background:#{{ aim_user.profile_sidebar_border_color }} none repeat scroll 0 0;}
</style>
{% endblock %}

{% load twitcn_filters %}

{% block content %}
<div id="status_update_box" style="display:none;">
    <form class="status-update-form" action="{{ ROOT_PATH }}/tweet/">
      <fieldset class="common-form standard-form">
        <div class="bar">
          <h3><label class="doing" for="status">What's happening ?</label></h3>
          <span class="numeric" id="chars_left_notice">
            <strong class="char-counter" id="status-field-char-counter" style="color: rgb(204, 204, 204);">140</strong>
          </span>
        </div>
        <div class="info">
          <textarea onchange="javascript:checkCharCount();" onkeyup="javascript:checkCharCount();" name="tweet-text" tabindex="1" id="status-textarea" class="round" rows="2" cols="40"></textarea>
          <div class="status-btn">
            <input type="button" onclick="javascript:return tweet();" tabindex="2" class="status-btn round-btn disabled" id="update-submit" value="Tweet"/>
          </div>
        </div>
      </fieldset>
    </form>
</div> <!-- end of #status_update_box -->

<div class="profile-user">
    <div class="user">
        <h2>
            <img src="{{ aim_user.profile_image_bigger_url }}">
            <div> {{ aim_user.screen_name }} </div>
        </h2>
        <div id="follow-state-{{ aim_user.screen_name }}" class="profile-controls">
            {% if aim_user.following %}
              <span class="is-following"><i></i><strong>Following</strong></span>
            {% else %}
              <button onclick="javascript:follow_user('{{ aim_user.screen_name }}');return false;" title="" class="btn"><i></i>Follow</button>
            {% endif %}
        </div>
    </div>
</div>

<div id="timeline_heading">
  <h1 id="heading"></h1>
</div>

<ol id="timeline" class="statuses"></ol>
{% endblock %}

{% block right_side %}
<div id="side">

  <div id="profile" class="section">
    <ul class="about vcard entry-author">
	  <li><span class="label">Name</span> <span class="fn">{{ aim_user.name }}</span></li>
      {% if aim_user.location %}<li><span class="label">Location</span> <span class="adr">{{ aim_user.location }}</span></li>{% endif %}
      {% if aim_user.url %}<li><span class="label">Web</span> <a target="_blank" class="url" href="{{ aim_user.url }}">{{ aim_user.url }}</a></li>{% endif %}
	  {% if aim_user.description %}<li id="bio"><span class="label">Bio</span> <span class="bio">{{ aim_user.description|ParseStatusText|safe }}</span></li>{% endif %}
	  <li><span class="label">Since</span> <span class="fn">{{ aim_user.created_at|GetShortDate }}</span></li>
	  <li><span class="label">Tweet Rate</span> <span class="fn">{{ aim_user.tweet_rate }}</span></li>
	</ul>
    
    <div class="stats">
      <table>
        <tr>
          <td>
            <a onclick="javascript:loadUsers({{ more_data_following_json }});" class="link-following_page" id="following_count_link" href="#following">
              <span class="stats_count numeric" id="following_count">{{ aim_user.friends_count }} </span>
              <span class="label">Following</span>
            </a>
          </td>
          <td>
		    <a onclick="javascript:loadUsers({{ more_data_followers_json }});" class="link-followers_page" id="follower_count_link" href="#followers">
		      <span class="stats_count numeric" id="follower_count">{{ aim_user.followers_count }} </span>
		      <span class="label">Followers</span>
		    </a>
          </td>
          <td>
		    <a title="See which lists you’re on" rel="me" class="link-lists_page" id="lists_count_link" href="#">
		      <span class="stats_count numeric" id="lists_count">0 </span>
		      <span class="label">Listed</span>
		    </a>
          </td>
        </tr>
      </table>
    </div> <!-- end of .stats -->
  </div> <!-- end of profile -->
  
  <ul id="primary_nav" class="sidebar-menu">
    <li id="tweets_tab" class="">
      <a href="#tweets" onclick="javascript:loadMoreStatus({{ more_data_json }});">
        <span class="numeric">{{ aim_user.statuses_count }}</span>
        <span>Tweets </span>
      </a>
    </li>
    <li id="favorites_tab">
      <a href="#favorites" onclick="javascript:loadMoreStatus({{ more_data_favorites_json }});">
        <span class="numeric">{{ aim_user.favourites_count }}</span>
        <span>Favorites </span>
      </a>
    </li>
  </ul>
  
  <hr/>
  
  <div class="section" id="user_actions">
    <h2 class="sidebar-title"><span>Actions</span></h2>
        {% if aim_user.following %}
		  <a href="#" onclick="javascript:unfollow_user('{{ aim_user.screen_name }}');return false;" id="follow-user-{{ aim_user.screen_name }}">unfollow</a> {{ aim_user.screen_name }}<br/>
		{% else %}
		  <a href="#" onclick="javascript:follow_user('{{ aim_user.screen_name }}');return false;" id="follow-user-{{ aim_user.screen_name }}">follow</a> {{ aim_user.screen_name }}<br/>
		{% endif %}

        {% if aim_user.isBlocked %}
		  <a href="#" onclick="javascript:unblock_user('{{ aim_user.screen_name }}');return false;" id="block-user-{{ aim_user.screen_name }}">unblock</a> {{ aim_user.screen_name }}<br/>
        {% else %}
		  <a href="#" onclick="javascript:block_user('{{ aim_user.screen_name }}');return false;" id="block-user-{{ aim_user.screen_name }}">block</a> {{ aim_user.screen_name }}<br/>
		  <a href="#" onclick="javascript:report_spam('{{ aim_user.id }}');return false;" id="spam-user-{{ aim_user.screen_name }}">report for spam</a><br/>
        {% endif %}
  </div>
  <hr/>
  
  {% if followings %}
  <div class="section">
    <h2 class="sidebar-title"><span>Following</span></h2>
      <div id="following_list">
    	{% for user in followings %}
        <span class="vcard">
          <a title="{{ user.name }}{% if user.description %}：{{ user.description }}{% endif %}({{ user.friends_count }}/{{ user.followers_count }})" class="url" href="{{ ROOT_PATH }}/{{ user.screen_name }}/"><img width="24" height="24" src="{{ user.profile_image_url }}" class="photo fn" alt="{{ user.name }}"/></a>  
    	</span>
    	{% endfor %}
      </div>
      {% if greater_than_36 %}
      <a onclick="javascript:loadUsers({{ more_data_following_json }});" class="link-following_page" id="following_count_link" href="#following">View all...</a>
  </div>
      {% endif %}
  <hr/>
  {% endif %}
  
</div> <!-- end of side -->
{% endblock %}
